<template>
	<el-dialog v-model="_d.visible" draggable :close-on-click-modal="false" width="800px">
		<template #header>
			<div style="color: #fff">预算详情</div>
		</template>
		<el-descriptions :column="2" border>
    	<el-descriptions-item label="预算名称">{{_d.row.name}}</el-descriptions-item>
    	<el-descriptions-item label="预算金额">{{_d.row.appliedAmount}}元</el-descriptions-item>
    	<el-descriptions-item label="公共预算">{{_d.row.isPublicBudget ? '是' : '否'}}</el-descriptions-item>
    	<el-descriptions-item label="预算年度">{{_d.row.year}}</el-descriptions-item>
    	<el-descriptions-item label="批复总额">{{_d.row.approvedAmount}}元</el-descriptions-item>
    	<el-descriptions-item label="发布金额">{{_d.row.allocatedAmount}}元</el-descriptions-item>
    	<el-descriptions-item label="已匹配金额">{{_d.row.spentAmount}}元</el-descriptions-item>
    	<el-descriptions-item label="未匹配金额">{{_d.row.unallocatedAmount}}元</el-descriptions-item>
    	<el-descriptions-item label="预算描述" :span="2">{{_d.row.description}}</el-descriptions-item>
    	<el-descriptions-item label="会议纪要">
    		<div v-if="_d.row.fileId && _d.fileData" class="file-box">
					<el-icon><Document /></el-icon>
					<span class="name" @click="showFile(_d.fileData)">{{_d.fileData.fileName + _d.fileData.suffix}}</span>
				</div>
    	</el-descriptions-item>
    </el-descriptions>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="cancel">关 闭</el-button>
			</span>
		</template>
	</el-dialog>

	<mFilePreview ref="mFilePreviewRef"/>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, onMounted, watch } from 'vue';
import { ElNotification } from 'element-plus';
import {Document} from '@element-plus/icons-vue'
import {$get, $post, $postFile} from '/@/utils/request';
import mFilePreview from "/@/components/mFilePreview/index.vue";

const mFilePreviewRef = ref();

const _d = reactive({
	visible: false,
	btnLoading: false,

	row: {},

	// 预算年度
	budgetyear: [],

	fileData: null,
});

watch(() => _d.row.fileId, () => {
	getFile(_d.row.fileId)
})

// 打开弹窗
const open = (id) => {
	getDetail(id);
	_d.visible = true;
};

// 取消
const cancel = () => {
	_d.visible = false;
};


// 获取预算详情
function getDetail(id) {
	$get(`/budgetSrv/getbudgetone/${id}`).then(res => {
		_d.row = res.result;
		console.log(_d.row.fileId)
	})
}

// 获取附件
function getFile(id) {
	if(!id) {
		_d.fileData = null;
		return;
	}
	$get(`/budgetSrv/geibudgetfile/${id}`).then(res => {
		_d.fileData = res.result;
	})
}

function showFile(obj) {
	mFilePreviewRef.value.open(obj.url);
}


// 导出对象
defineExpose({ open });

</script>
<style lang="scss" scoped>
:deep(.el-descriptions__label) {
	width: 150px;
}
.file-box {
	background: #F5F7FA;
	display: flex;
	align-items: center;
	padding: 2px 5px;
	color: #999;
	.name {
		margin-left: 10px;
		color: var(--el-color-primary);
		cursor: pointer;
	}
}
</style>
